import { ComponentProps, Mut, VueComponent } from "vue3-oop"
import { Collapse, CollapsePanel, Tag } from 'ant-design-vue';
import ReserveWidgets from '../widgets/list-widget'
import Draggable from 'vuedraggable'
import moduleCss from './index.module.scss'
import scrollBarCss from '@/styles/scrollbar.module.scss'

interface IProps {}
export default class DsFormSpare extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {}

  @Mut() fdnReserveWidgets = ReserveWidgets;

  @Mut() activeKey = this.fdnReserveWidgets.map((item) => item.title);

  constructor(
  ) {
    super();
  }

  render() {

    return (
      <Collapse
        class={[
          moduleCss['fdn-reserve'],
          scrollBarCss['scrollbar-y']
        ]}
        activeKey={this.activeKey}
        onChange={(newActiveKey)=>{this.activeKey = newActiveKey as string[]}}
      >
        {
          this.fdnReserveWidgets.map((item, index) => {
            return (
              <CollapsePanel header={item.title} key={item.title}>
                <Draggable
                  {...{
                    animation: "300",
                    group: {
                      name: 'form',
                      pull: 'clone',
                      put: false,
                    },
                    chosenClass: "chosenClass",
                    dragClass: "dragClass",
                    ghostClass: "ghostClass",
                    sort: false
                  }}
                  list={item.list}
                  itemKey="type"
                >
                  {{
                    item: ({ element }: any) => {
                      return (
                        <Tag class={moduleCss['com-tag']} >
                          {element.label}
                        </Tag>
                      )
                    }
                  }}
                </Draggable>
              </CollapsePanel>
            )
          })
        }
      </Collapse>
    )
  }
}